<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      :label-position="labelPosition"
    >
      <!-- 第一行 -->
      <el-row :gutter="20">
        <!-- 学科区域 -->
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="学科">
              <el-select
                v-model="formInline.subjectID"
                placeholder="请选择"
                class="wuan">
                <el-option v-for="(item, index) in subject" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <!-- 二级目录区域 -->
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="二级目录">
              <el-select
                v-model="formInline.subject"
                placeholder="请选择"
                class="wuan"
              >
              </el-select>
            </el-form-item></div
        ></el-col>
        <!-- 标签区域 -->
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="标签">
              <el-select
                v-model="formInline.subject"
                placeholder="请选择"
                class="wuan"
              >
              </el-select>
            </el-form-item></div
        ></el-col>
        <!-- 关键字 -->
        <el-col :span="6"
          ><div class="grid-content bg-purple-light">
            <el-form-item label="关键字">
              <el-input v-model="formInline.keyword" class="wuan"></el-input>
            </el-form-item></div
        ></el-col>
      </el-row>
      <!-- 第一行 -->
      <!-- 第二行 -->
      <el-row :gutter="20">
        <!-- 试题类型区域 -->
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="试题类型">
              <el-select
                v-model="formInline.questionType"
                placeholder="请选择"
                class="wuan">
                <el-option v-for="item in shiti" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <!-- 难度区域 -->
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="难度">
              <el-select
                v-model="formInline.difficulty"
                placeholder="请选择"
                class="wuan"
              >
                <el-option v-for="item in nandu" :key="item.value" :label="item.label" :value="item.label"></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <!-- 方向区域 -->
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="方向">
              <el-select
                v-model="formInline.direction"
                placeholder="请选择"
                class="wuan"
              >
                <el-option v-for="(item, index) in fangXiang" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <!-- 录入人区域 -->
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="录入人">
              <el-select
                v-model="formInline.creatorID"
                placeholder="请选择"
                class="wuan"
              >
                <el-option v-for="item in luru" :label="item.username" :key="item.id" :value="item.username"></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
      </el-row>
      <!-- 第二行 -->
      <!-- 第三行 -->
      <el-row :gutter="20">
        <!-- 题目备注区域 -->
        <el-col :span="6"
          ><div class="grid-content bg-purple-light">
            <el-form-item label="题目备注">
              <el-input v-model="formInline.remarks" class="wuan"></el-input>
            </el-form-item></div
        ></el-col>
        <!-- 企业简称区域 -->
        <el-col :span="6"
          ><div class="grid-content bg-purple-light">
            <el-form-item label="企业简称">
              <el-input v-model="formInline.shortName" class="wuan"></el-input>
            </el-form-item></div
        ></el-col>
        <!-- 城市选择区域 -->
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item label="城市">
              <el-select
                v-model="formInline.province"
                placeholder="请选择"
                @change="currentSel"
                style="width: 150px"
              >
                <el-option v-for="(item, index) in citys" :key="index" :label="item" :value="item"></el-option>
              </el-select>
              <el-select
                v-model="formInline.city"
                placeholder="请选择"
                style="width: 150px"
              >
                <el-option v-for="(item, index) in areas" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item></div
        ></el-col>
        <!-- 按钮区域 -->
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form-item>
              <el-button @click="onQing">清除</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </div></el-col
        >
      </el-row>
      <!-- 第三行 -->
    </el-form>
    <!-- 列表区域 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <!-- 全部列表数据 -->
      <el-tab-pane label="全部" name="first">
      <!-- 数据条数 -->
      <div>
        <p class="yang">
          <i class="el-icon-share"></i>
          数据一共 {{ this.total }} 条
        </p>
      </div>
        <template>
          <!-- 数据显示区域 -->
          <!--
            data: 传入一个对象数组
            table按照列来渲染 把每列要渲染的字段通过 prop 属性指定
            自定义渲染内容 借助插槽进行渲染 slot-scope="scope" scope.row(拿到的是当前完整的数据对象)
           -->
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
            <el-table-column prop="subject" label="学科" width="120"> </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120"></el-table-column>
            <el-table-column label="题型" width="120">
              <template slot-scope="scope">
                <!-- 题型格式化 -->
                {{ _questionType(scope.row.questionType) }}
              </template>
            </el-table-column>
            <el-table-column label="题干" width="300">
              <template slot-scope="scope">
                <!-- 题干标签格式化 -->
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <!-- 时间格式化处理 -->
              <template slot-scope="scope">
                {{ addDate(scope.row.addDate) }}
              </template>
            </el-table-column>
            <el-table-column label="难度" width="120">
              <template slot-scope="scope">
                <!-- 难度格式化 -->
                {{ _difficulty(scope.row.difficulty) }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120"></el-table-column>
            <el-table-column label="审核状态" width="120">
              <!-- 审核状态格式化 -->
              <template slot-scope="scope">
                {{ _chkState(scope.row.chkState) }}
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120"></el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120"></el-table-column>
            <el-table-column label="发布状态" width="120">
              <!-- 发布状态格式化 -->
              <template slot-scope="scope">
                {{ _questions(scope.row.questionType) }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="yulanFn(scope.row.id)">预览</el-button>
              <el-button type="text" size="small" :disabled="scope.row.chkState === 2 ? true : false" @click="shenheFn(scope.row.id)">审核</el-button>
              <el-button type="text" size="small" @click="transferParameters(scope.row.id)">修改</el-button>
              <el-button type="text" size="small" @click="shangjia(scope.row)">{{ scope.row.publishState === 0 ? '上架' : '下架'}}</el-button>
              <el-button type="text" size="small" :disabled="scope.row.questionType === '2' ? true : false" @click="shanchuFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
    </el-table>

    <!-- 数据显示区域 -->
        </template>
      </el-tab-pane>
      <!-- 待审核数据展示 -->
      <el-tab-pane label="待审核" name="second">
        <!-- 数据条数 -->
      <div>
        <p class="yang">
          <i class="el-icon-share"></i>
          数据一共 {{ this.total }} 条
        </p>
      </div>
        <template>
          <!-- 数据显示区域 -->
          <!--
            data: 传入一个对象数组
            table按照列来渲染 把每列要渲染的字段通过 prop 属性指定
            自定义渲染内容 借助插槽进行渲染 slot-scope="scope" scope.row(拿到的是当前完整的数据对象)
           -->
          <el-table :data="tableDaishen" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
            <el-table-column prop="subject" label="学科" width="120"> </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120"></el-table-column>
            <el-table-column label="题型" width="120">
              <template slot-scope="scope">
                <!-- 题型格式化 -->
                {{ _questionType(scope.row.questionType) }}
              </template>
            </el-table-column>
            <el-table-column label="题干" width="300">
              <template slot-scope="scope">
                <!-- 题干标签格式化 -->
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <!-- 时间格式化处理 -->
              <template slot-scope="scope">
                {{ addDate(scope.row.addDate) }}
              </template>
            </el-table-column>
            <el-table-column label="难度" width="120">
              <template slot-scope="scope">
                <!-- 难度格式化 -->
                {{ _difficulty(scope.row.difficulty) }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120"></el-table-column>
            <el-table-column label="审核状态" width="120">
              <!-- 审核状态格式化 -->
              <template slot-scope="scope">
                {{ _chkState(scope.row.chkState) }}
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120"></el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120"></el-table-column>
            <el-table-column label="发布状态" width="120">
              <!-- 发布状态格式化 -->
              <template slot-scope="scope">
                {{ _questions(scope.row.questionType) }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="yulanFn(scope.row.id)">预览</el-button>
              <el-button type="text" size="small" :disabled="scope.row.chkState === 2 ? true : false" @click="shenheFn(scope.row.id)">审核</el-button>
              <el-button type="text" size="small" @click="transferParameters(scope.row.id)">修改</el-button>
              <el-button type="text" size="small" @click="shangjia(scope.row)">{{ scope.row.publishState === 0 ? '上架' : '下架'}}</el-button>
              <el-button type="text" size="small" :disabled="scope.row.questionType === '2' ? true : false" @click="shanchuFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
    </el-table>

    <!-- 数据显示区域 -->
        </template>
      </el-tab-pane>
      <!-- 已审核数据展示 -->
      <el-tab-pane label="已审核" name="third">
        <!-- 数据条数 -->
      <div>
        <p class="yang">
          <i class="el-icon-share"></i>
          数据一共 {{ this.total }} 条
        </p>
      </div>
        <template>
          <!-- 数据显示区域 -->
          <!--
            data: 传入一个对象数组
            table按照列来渲染 把每列要渲染的字段通过 prop 属性指定
            自定义渲染内容 借助插槽进行渲染 slot-scope="scope" scope.row(拿到的是当前完整的数据对象)
           -->
          <el-table :data="tabaleYishen" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
            <el-table-column prop="subject" label="学科" width="120"> </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120"></el-table-column>
            <el-table-column label="题型" width="120">
              <template slot-scope="scope">
                <!-- 题型格式化 -->
                {{ _questionType(scope.row.questionType) }}
              </template>
            </el-table-column>
            <el-table-column label="题干" width="300">
              <template slot-scope="scope">
                <!-- 题干标签格式化 -->
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <!-- 时间格式化处理 -->
              <template slot-scope="scope">
                {{ addDate(scope.row.addDate) }}
              </template>
            </el-table-column>
            <el-table-column label="难度" width="120">
              <template slot-scope="scope">
                <!-- 难度格式化 -->
                {{ _difficulty(scope.row.difficulty) }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120"></el-table-column>
            <el-table-column label="审核状态" width="120">
              <!-- 审核状态格式化 -->
              <template slot-scope="scope">
                {{ _chkState(scope.row.chkState) }}
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120"></el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120"></el-table-column>
            <el-table-column label="发布状态" width="120">
              <!-- 发布状态格式化 -->
              <template slot-scope="scope">
                {{ _questions(scope.row.questionType) }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="yulanFn(scope.row.id)">预览</el-button>
              <el-button type="text" size="small" :disabled="scope.row.chkState === 2 ? true : false" @click="shenheFn(scope.row.id)">审核</el-button>
              <el-button type="text" size="small" @click="transferParameters(scope.row.id)">修改</el-button>
              <el-button type="text" size="small" @click="shangjia(scope.row)">{{ scope.row.publishState === 0 ? '上架' : '下架'}}</el-button>
              <el-button type="text" size="small" :disabled="scope.row.questionType === '2' ? true : false" @click="shanchuFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
    </el-table>

    <!-- 数据显示区域 -->
        </template>
      </el-tab-pane>
      <!--  -->
      <el-tab-pane label="已拒绝" name="fourth">
        <!-- 数据条数 -->
      <div>
        <p class="yang">
          <i class="el-icon-share"></i>
          数据一共 {{ total }} 条
        </p>
      </div>
        <template>
          <!-- 数据显示区域 -->
          <!--
            data: 传入一个对象数组
            table按照列来渲染 把每列要渲染的字段通过 prop 属性指定
            自定义渲染内容 借助插槽进行渲染 slot-scope="scope" scope.row(拿到的是当前完整的数据对象)
           -->
          <el-table :data="tablejujue" border style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="150"></el-table-column>
            <el-table-column prop="subject" label="学科" width="120"> </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120"></el-table-column>
            <el-table-column label="题型" width="120">
              <template slot-scope="scope">
                <!-- 题型格式化 -->
                {{ _questionType(scope.row.questionType) }}
              </template>
            </el-table-column>
            <el-table-column label="题干" width="300">
              <template slot-scope="scope">
                <!-- 题干标签格式化 -->
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="120">
              <!-- 时间格式化处理 -->
              <template slot-scope="scope">
                {{ addDate(scope.row.addDate) }}
              </template>
            </el-table-column>
            <el-table-column label="难度" width="120">
              <template slot-scope="scope">
                <!-- 难度格式化 -->
                {{ _difficulty(scope.row.difficulty) }}
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120"></el-table-column>
            <el-table-column label="审核状态" width="120">
              <!-- 审核状态格式化 -->
              <template slot-scope="scope">
                {{ _chkState(scope.row.chkState) }}
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="120"></el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120"></el-table-column>
            <el-table-column label="发布状态" width="120">
              <!-- 发布状态格式化 -->
              <template slot-scope="scope">
                {{ _questions(scope.row.questionType) }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="yulanFn(scope.row.id)">预览</el-button>
              <el-button type="text" size="small" :disabled="scope.row.chkState === 2 ? true : false" @click="shenheFn(scope.row.id)">审核</el-button>
              <el-button type="text" size="small" @click="transferParameters(scope.row.id)">修改</el-button>
              <el-button type="text" size="small" @click="shangjia(scope.row)">{{ scope.row.publishState === 0 ? '上架' : '下架'}}</el-button>
              <el-button type="text" size="small" :disabled="scope.row.questionType === '2' ? true : false" @click="shanchuFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
    </el-table>

    <!-- 数据显示区域 -->
        </template>
      </el-tab-pane>
    </el-tabs>
    <!-- 列表区域 -->
    <!-- 分页组件 -->
    <div class="blockfenye">
      <!--
        layout 配置分页器的结构组成
        total 数据总条数 分页逻辑: 总条数 / 每页条数(10) = 页数
        @current-change 点击页数的时候自动触发的事件 可以吧当前的页数 传出来供业务使用
        current-page 当前的页数
        background 是否显示背景色
        page-sizes 每页显示个数选择器
        total 总条目数
       -->
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="100"
      layout="prev, pager, next, sizes, jumper"
      :total="total">
    </el-pagination>
    </div>
    <!-- 审核组件引入 -->
    <add-shen :show-dialog="showDialog" @clase-dialog="closeDialog" :shen-he="data"></add-shen>
    <!-- 预览组件使用 -->
    <add-yulan :shouYulan="shouYulan" @clase-yulan="claseYulan" :yulanChuan='yulanChuan'></add-yulan>
  </div>
</template>

<script>
// 学科接口
import { simple } from '@/api/hmmm/subjects'
// 录入人接口
import { simple as lusimple } from '@/api/base/users'
// 引入城市
import { provinces, citys } from '@/api/hmmm/citys'
// 引入假数据
import { difficulty, questionType, direction, chkType, publishType } from '@/api/hmmm/constants'
// 引入列表数据, 引入删除接口 , 上下架
import { choice, remove, choicePublish } from '@/api/hmmm/questions'
// 引入时间处理
import dayjs from 'dayjs'
// 引入题目审核组件的弹出层
import AddShen from './add-shenhe'
// 引入题目预览组件的弹出层
import AddYulan from './add-yulan'

export default {
  components: {
    AddShen,
    AddYulan
  },
  data () {
    return {
      // 分页组件,数据默认为空
      total: 0,
      params: {
        pagesize: 5, // 每页显示几条数据
        page: 1
      },
      // 学科下拉
      subject: [],
      // 试题类型
      shiti: questionType,
      // 难度
      nandu: difficulty,
      // 方向
      fangXiang: direction,
      // 录入人
      luru: [],
      // 所有城市数据
      citys: [],
      // 城市下地区
      city: null,
      areas: [],
      area: null,
      // 表单提交
      formInline: {
        // 当前页数
        page: null,
        // 每页多少
        pagesize: null,
        // 学科下拉菜单数据
        subjectID: null,
        // 难度
        difficulty: null,
        // 试题类型
        questionType: null,
        // 标签名称
        tags: null,
        // 企业所在地省份
        province: null,
        // 企业所在城市
        city: null,
        // 关键字
        keyword: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 方向
        direction: null,
        // 录入人
        creatorID: null,
        // 目录
        catalogID: null
      },
      activeName: 'first',
      labelPosition: '',
      // 列表数据
      tableData: [],
      // 分页中点击当前的页数的记录
      currentPage4: null,
      // 待审核列表数据
      tableDaishen: [],
      // 已审核列表数据
      tabaleYishen: [],
      // 已拒绝数据
      tablejujue: [],
      // 删除按钮要传递的参数
      data: {
        id: null
      },
      // 审核组件是否展示
      showDialog: false,
      // 预览组件是否展示
      shouYulan: false,
      // 预览组件要渲染的数组
      yulanChuan: []
      // 搜索接口要使用的参数
      // sousuo: {
      //   page: null,
      //   pagesize: null
      // }
    }
  },
  // 声明周期调用接口
  mounted () {
    // 调用学科接口
    this.hSimple()
    // 调用录入人接口
    this.hLusimple()
    // 列表数据调用
    this.hChoice()
    // 城市方法调用
    this.hProvinces()
  },
  methods: {
    // 点击清除按钮操作
    onQing () {
      this.formInline = {
        // 学科下拉菜单数据
        subjectID: '',
        // 难度
        difficulty: '',
        // 试题类型
        questionType: '',
        // 标签名称
        tags: '',
        // 企业所在地省份
        province: '',
        // 企业所在城市
        city: '',
        // 关键字
        keyword: '',
        // 题目备注
        remarks: '',
        // 企业简称
        shortName: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: '',
        // 目录
        catalogID: ''
      }
      // 提示清除完成
      this.$message.success('清除成功')
      // 重新调用列表数据
      this.hChoice()
    },
    // 点击搜索按钮
    async onSubmit () {
      // this.sousuo.page = this.params.page
      // this.sousuo.pagesize = this.params.pagesize
      // const res = await choice({ ...this.sousuo, subjectID: this.formInline.subjectID })
      this.formInline.page = this.params.page
      this.formInline.pagesize = this.params.pagesize
      const res = await choice(this.formInline)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 学科数据获取
    async hSimple () {
      const res = await simple()
      this.subject = res.data
      console.log('切换学科获得的数据', res)
    },
    // 录入人接口
    async hLusimple () {
      const res = await lusimple()
      this.luru = res.data
    },
    // 点击选择城市
    hProvinces () {
      this.citys = provinces()
    },
    currentSel (val) {
      this.city = val
      this.hCitys(val)
    },
    hCitys () {
      this.areas = citys(this.city)
    },
    // 列表数据
    async hChoice () {
      let res = null
      if (this.formInline.subjectID) {
        console.log('有id时调这个')
        res = await choice({ ...this.params, subjectID: this.formInline.subjectID })
      } else {
        res = await choice(this.params)
      }
      this.tableData = res.data.items
      this.total = res.data.counts
      console.log(res)
    },
    // 点击列表区域
    handleClick (tab, event) {
      this.params.page = 1
      console.log('切换面板', tab.name, tab, event)
      if (tab.name === 'first') { // 全部
        this.hChoice()
        // console.log('全部')
      } else if (tab.name === 'second') { // 待审核
        // console.log('待审核')
        this.daishenFn()
      } else if (tab.name === 'third') { // 已审核
        this.yishenheFn()
        // console.log('已审核')
      } else if (tab.name === 'fourth') { // 已拒绝
        this.jujueFn()
        // console.log('拒绝')
      }
      // // 待审核调用
      // this.daishenFn()
      // // 已审核调用
      // this.yishenheFn()
      // // 已拒绝调用
      // this.jujueFn()
    },
    // 时间处理格式化
    addDate (value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },
    // 题型格式化
    _questionType (val) {
      const tixing = questionType
      const map = {}
      tixing.forEach(item => {
        map[item.value] = item.label
      })
      return map[val]
    },
    // 难度格式化
    _difficulty (val) {
      const nandu = difficulty
      const map = {}
      nandu.forEach(item => {
        map[item.value] = item.label
      })
      return map[val]
    },
    // 审核状态格式化
    _chkState (val) {
      const shenhe = chkType
      const map = {}
      shenhe.forEach(item => {
        map[item.value] = item.label
      })
      return map[val]
    },
    // 发布状态格式化
    _questions (val) {
      const fabu = publishType
      const map = {}
      fabu.forEach(item => {
        map[item.value] = item.label
      })
      return map[val]
    },
    // 分页组件点击跳转到那一页
    handleCurrentChange (page) {
      this.currentPage4 = page
      // 点击页数 让 table 渲染当前页所对应的数据
      // 思路:
      // 1, 当前页数被点击时 以page作为参数去发送数据请求 拿到的就是当前页的数据
      // 2, 把请求到的数据 重新交给负责表格渲染的tableList
      this.params.page = page // 先做
      // this.hChoice() // 后座 最新页数
      this.onSubmit()
    },
    // 分页组件一页显示多少条数据
    handleSizeChange (page) {
      this.params.pagesize = page
      // this.hChoice()
      this.onSubmit()
    },
    // 列表中的删除按钮
    shanchuFn (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.data.id = id
        // 删除接口调用
        await remove(this.data)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 重新调用列表接口
        this.hChoice()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击修改按钮跳转 并把 id 传过去
    transferParameters (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: id
        }
      })
    },
    // 待审核数据数据
    async daishenFn () {
      // const dsh = []
      // this.tableData.forEach(item => {
      //   if (item.chkState === 1) {
      //     dsh.push(item)
      //   }
      // })
      // this.tableDaishen = dsh

      let res = null
      if (this.formInline.subjectID) {
        console.log('有id时调这个')
        res = await choice({ ...this.params, chkState: 0, subjectID: this.formInline.subjectID })
      } else {
        res = await choice({ ...this.params, chkState: 0 })
      }

      console.log('学科id', this.formInline.subjectID)
      // const res = await choice({ ...this.params, chkState: 0, subjectID: this.formInline.subjectID })
      console.log(this.formInline.chkState)
      this.tableDaishen = res.data.items
      this.total = res.data.counts
    },
    // 已审核数据
    async yishenheFn () {
      // const dsh = []
      // this.tableData.forEach(item => {
      //   if (item.chkState === 2) {
      //     dsh.push(item)
      //   }
      // })
      // this.tabaleYishen = dsh
      console.log('学科id', this.formInline.subjectID)
      let res = null
      if (this.formInline.subjectID) {
        console.log('有id时调这个')
        res = await choice({ ...this.params, chkState: 1, subjectID: this.formInline.subjectID })
      } else {
        res = await choice({ ...this.params, chkState: 1 })
      }

      // const res = await choice({ ...this.params, chkState: 1, subjectID: this.formInline.subjectID })
      this.tabaleYishen = res.data.items
      this.total = res.data.counts
    },
    // 已拒绝数据
    async jujueFn () {
      // const dsh = []
      // this.tableData.forEach(item => {
      //   if (item.chkState === 3) {
      //     dsh.push(item)
      //   }
      // })
      // this.tablejujue = dsh

      let res = null
      if (this.formInline.subjectID) {
        console.log('有id时调这个')
        res = await choice({ ...this.params, chkState: 2, subjectID: this.formInline.subjectID })
      } else {
        res = await choice({ ...this.params, chkState: 2 })
      }

      console.log('学科ID', this.formInline.subjectID)
      // const res = await choice({ ...this.params, chkState: 2, subjectID: this.formInline.subjectID })
      this.tablejujue = res.data.items
      this.total = res.data.counts
    },
    // 审核按钮点击
    shenheFn (id) {
      this.showDialog = true
      this.data.id = id
    },
    // 审核组件的自定义事件
    closeDialog () {
      this.showDialog = false
    },
    // 预览按钮点击
    yulanFn (id) {
      this.shouYulan = true
      // 处理逻辑
      const yul = []
      this.tableData.forEach(item => {
        if (item.id === id) {
          yul.push = item
        }
      })
      this.yulanChuan = yul
      console.log(this.yulanChuan)
    },
    // 预览自定义事件,关闭弹框
    claseYulan () {
      this.shouYulan = false
    },
    // 上下架功能
    shangjia (row) {
      // 上架
      if (row.publishState === 0) {
        this.$confirm('您确定上架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish({ id: row.id, publishState: 1 })
          this.hChoice()
          this.$message({
            type: 'success',
            message: '上架成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消上架'
          })
        })
        // 下架
      } else if (row.publishState === 1) {
        this.$confirm('您确定下架这道题目吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish({ id: row.id, publishState: 0 })
          this.hChoice()
          this.$message({
            type: 'success',
            message: '下架成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架'
          })
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
/* 清除浮动 */
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}
.clearfix {
  *zoom: 1;
}
.demo-form-inline {
  margin-top: 70px;
}
.grid-content {
  float: right;
}
.wuan {
  width: 300px;
}
.yang {
  font-size: 14px;
  color: rgb(90, 86, 86);
  background-color: rgb(220, 215, 224);
  padding: 10px;
  border-radius: 5px;
}
.blockfenye {
  // height: 60px;
  // margin-top: 29px;
  // margin-right: 29px;
  text-align: right;
  // float: right;
}
</style>
